<!--
 * @Author: your name
 * @Date: 2021-11-29 08:33:56
 * @LastEditTime: 2022-02-17 18:32:10
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\components\ActionBar\searchBox.vue
-->
<template>
  <div>
    <div class="seabar-lcp">
      <el-button size="small" type="primary" @click="$router.push('/pending')">待处理</el-button>
      <i class="line"></i>
      <!-- <el-button size="small" @click="$router.push({ path: '/pending', params: { userId: '123' }})">待处理</el-button> -->
      <el-button size="small" type="danger" @click="$router.push('/over-due')">已逾期</el-button>
      <i class="line"></i>
      <el-button size="small" type="success" @click="$router.push('/completed')">已完成</el-button>
      <i class="line"></i>
      <el-button size="small" type="info" @click="$router.push('/have-been-voided')">已作废</el-button>

    </div>
    <div class="seabar-lc">
      <div class="label-input mr-20">
        <div class="label">个体名称:</div>
        <div class="input">
          <el-input v-model="test" clearable />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">个体编号:</div>
        <div class="input">
          <el-input v-model="test" clearable />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">处理时间:</div>
        <div class="input">
          <el-date-picker v-model="startTime" align="right" type="date" placeholder="选择日期" />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="input">
          <el-date-picker v-model="endTime" align="right" type="date" placeholder="选择日期" />
        </div>
      </div>
      <div class="search ml-20">
        <img src="~@/assets/action-bar-icon/search.png" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchBox",
  data() {
    return {
      test: "",
      startTime: "",
      endTime: ""
    };
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.el-input {
  width: 150px;
}
img {
  height: 30px;
  width: 64px;
}
.seabar-lc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > div {
    display: flex;
    align-items: center;
  }
}
.seabar-lcp{
  margin: 10px 0;
  display: flex;
  justify-content: space-around;
  .line{
    line-height: 30px;
    width: 50px;
    border:1px solid red;
    height: 1px;
  }
}
::v-deep .el-button {
  width: 70px;
  height: 30px;
  margin: 0;
}
::v-deep .el-row {
  margin: 5px;
  .el-col {
    min-height: 1px;
  }
}
</style>
